<template>
<div class="boxbig">
  <div class="boxmain">
     <div>
  <input class="goLastxq" type="button" value="<   返回上页" @click="golast">
  <span style="font-size:20px"><b>悬赏任务的标题</b></span>
  <div class="authentication">
    <button class="smallbtn">科</button>
    <span style="float:left;font-size:14px;margin-left:15px;margin-top:17px">科技企业名称</span><img style="margin-top:20px;margin-left:10px;float:left;" src="@/assets/images/组 2549.png"><br><br>
    <span style="margin-left:15px;font-size:13px;color:rgb(164, 161, 161)">123456789&nbsp;&nbsp;&nbsp;123456789@qq.com</span>
  </div>
</div>
 <hr style="color:rgb(197, 196, 196)">
    <!-- +++++++++++++++++++++消息列表+++++++++++++++++++++++++++++++++++ -->
    
    

    <div class="formbd1">
      <el-form ref="form" :model="sizeForm" label-width="100px" size="small">
        <el-form-item label="任务标题">
          <el-input v-model="sizeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="任务类型">
          <p>单人任务</p>
        </el-form-item>
        <el-form-item label="任务奖励">
          <el-input v-model="sizeForm.date1"></el-input>
        </el-form-item>
        <el-form-item label="任务截止时间">
          <el-input v-model="sizeForm.date2"></el-input>
        </el-form-item>
        <el-form-item label="任务级别">
          <el-input v-model="sizeForm.resource"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="formbd2">
      <el-form ref="form" :model="sizeForm" label-width="100px" size="small">
        <el-form-item label="任务描述">
          <el-input
            type="textarea"
            :rows="3"
            style="width: 600px"
            v-model="sizeForm.desc"
          ></el-input>
        </el-form-item>
        <el-form-item label="任务要求">
          <el-input
            type="textarea"
            :rows="3"
            style="width: 600px"
            v-model="sizeForm.desc1"
          ></el-input>
        </el-form-item>

        <div>
          <el-form-item class="btn3">
            <el-button type="primary" @click="dialogFormVisible = true"
              >确认完成</el-button
            >
            <!-- <el-button @click="gocl">关闭任务</el-button> -->
            <el-button @click="dialogVisibletwo = true" plain type="danger"
              >取消任务</el-button
            >
            <el-dialog
              title="取消任务"
              :visible.sync="dialogVisibletwo"
              width="30%"
              :before-close="handleClose"
            >
              <span
                >如果无人接受任务，可直接取消！如果有人接受任务，取消后将扣除5%的任务奖励作为补偿给任务接受人！</span
              >
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
            <el-button
              style="margin-left: 12px"
              @click="dialogVisiblethree = true"
              plain
              type="warning"
              >打回重做</el-button
            >
            <el-dialog
              title="打回重做"
              :visible.sync="dialogVisiblethree"
              width="30%"
              :before-close="handleClose"
            >
              <span
                >打回后将通知接受任务人，同一个任务接受人最多打回三次！</span
              >
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
            <!-- 111111111111111111111111111 -->
            <el-dialog title="确认完成" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="完成程度：" :label-width="formLabelWidth">
                  <el-input
                    style="width: 300px"
                    v-model="form.name"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item style="margin-left: 38px" label="理由说明：">
                  <el-input
                    style="width: 300px; margin-top: 10px"
                    rows="3"
                    type="textarea"
                    v-model="form.desc"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary">确 定</el-button>
              </div>
            </el-dialog>
            <!-- 111111111111111111111111111 -->
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- +++++++++++++++++++++上传++++++++++++++++++++++++++++++++++++ -->
    <div class="update1">
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </div>
    <!-- +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    
  </div>
  <div class="boxsecond">
    <p style="margin-left:10px;margin-top:10px"><b>任务相关信息</b></p>
    <div class="information">
      <div style="height:10px"><div  style="width:80px;float:left"><span>科技公司呀</span></div><div style="float:left;"><span style="color:rgb(164, 161, 161)">10-10 16:30:00 发布任务</span></div></div><br>
       <div style="height:10px"><div  style="width:80px;float:left"><span>赵子龙</span></div><div style="float:left;"><span style="color:rgb(164, 161, 161)">10-10 16:30:00 发布任务</span></div></div><br>
       <div style="height:10px"><div  style="width:80px;float:left"><span>科技公司呀</span></div><div style="float:left;"><span style="color:rgb(164, 161, 161)">10-10 16:30:00 发布任务</span></div></div><br>
       <div style="height:10px"><div  style="width:80px;float:left"><span>赵子龙</span></div><div style="float:left;"><span style="color:rgb(164, 161, 161)">10-10 16:30:00 发布任务</span></div></div><br>
       <div style="height:10px"><div  style="width:80px;float:left"><span>科技公司呀</span></div><div style="float:left;"><span style="color:rgb(164, 161, 161)">10-10 16:30:00 发布任务</span></div></div><br>
       <div style="height:10px"><div  style="width:80px;float:left"><span>赵子龙</span></div><div style="float:left;"><span style="color:rgb(164, 161, 161)">10-10 16:30:00 发布任务</span></div></div><br>
       <div style="height:10px"><div  style="width:80px;float:left"><span>科技公司呀</span></div><div style="float:left;"><span style="color:rgb(164, 161, 161)">10-10 16:30:00 发布任务</span></div></div><br>
       <div style="height:10px"><div  style="width:80px;float:left"><span>赵子龙</span></div><div style="float:left;"><span style="color:rgb(164, 161, 161)">10-10 16:30:00 发布任务</span></div></div><br>
       <div style="height:10px"><div  style="width:80px;float:left"><span>科技公司呀</span></div><div style="float:left;"><span style="color:rgb(164, 161, 161)">10-10 16:30:00 发布任务</span></div></div><br>
       <div style="height:10px"><div  style="width:80px;float:left"><span>赵子龙</span></div><div style="float:left;"><span style="color:rgb(164, 161, 161)">10-10 16:30:00 发布任务</span></div></div><br>
       
    </div>
  </div>
</div>
  
</template>
<style>
.boxbig{
  width:1250px;
  height: 780px;
  
  /* border: red solid 1px; */
}
.boxmain {
  width: 890px;
  height: 780px;
  background-color: white;
  border-radius: 3px;
  /* border: red 1px solid; */
  float: left;
  /* padding-top: 50px; */
}
.boxsecond{
  width:320px;
  height: 410px;
  /* border:red solid 1px; */
  float: left;
  margin-left: 25px;
  border-radius: 3px;
  background-color: white;
  

}
.head {
  float: left;
}
.formbd1 {
  width: 500px;
  /* border: red solid 1px; */
  position: absolute;
  top: 180px;
  /* margin-left: 30px; */
}
.formbd2 {
  width: 1210px;
  /* border: red solid 1px; */
  position: absolute;
  top: 405px;
  /* margin-left: 30px; */
}
.btn3 {
  margin-top: 220px;
  /* margin-left: 815px; */
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.update1 {
  width: 350px;
  /* border: red 1px solid; */
  position: absolute;
  top: 600px;
  left: 320px;
}
.goLastxq{
  width: 150px;
  height: 90px;
  /* border: red solid 1px; */
  /* margin-left: 12px; */
  background-color: white;
  color: rgb(164, 161, 161);
  font-size: 13px;
}
.authentication{
  border-left:solid rgb(197, 196, 196) 0.5px;
  width: 320px;
  height: 90px;
  float: right;
}
.information{
  margin: 10px auto;
  width:280px;
  height: 360px;
  /* border: 1px red solid; */
}
.smallbtn{
  width:50px;
  height:50px;
  background:rgb(62, 213, 127);
  border-radius:50% 50%;
  margin-top:20px;
  margin-left:20px;
  color: aliceblue;
  float: left;
}
</style>

<script>
export default {
  data() {
    return {
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogVisibletwo: false,
      dialogVisiblethree: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      sizeForm: {
        name: "年后年后年后年后年后年后年后年后",
        //  radio: '1',
        // region: "三天",
        date1: "1,000",
        date2: "三天",
        // delivery: false,
        // type: [5],
        resource: "一般",
        desc: "年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年年后年后年后年后年年后年后年后年后年年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后",
        desc1:
          "年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年后年年后年后年后年后年年后年后年后年后年年后年后年后年后年年后年后年后年后年后年后年后年后年后年后年后年后年后",
      },
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    golast(){
      this.$router.go(-1);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    gozx() {
      this.$router.push("/qyzx");
    },
  },
};
</script>